<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta http-equiv="X-UA-Compatible" content="IE=8">
		<title>找回密码 </title>
		<link href="../favicon.ico" rel="icon" type="image/x-icon" />
		<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="../layui/css/layui.css">
		<link rel="stylesheet" href="../css/common.css">
		<link rel="stylesheet" href="../css/default.css">
		<link rel="stylesheet" href="../css/login.css">

		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js?version=1.01"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js?version=1.01"></script>
    <![endif]-->

	</head>

	<body>

		<!--头部-->
		<div class="layui-fluid">
			<div class="top_header">
				<div class="layui-container">
					<!--导航-->
					<nav class="navbar navbar-default" role="navigation" style="margin: 0;">
						<div class="container-fluid">
							<div class="navbar-header">
								<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
							<span class="sr-only">微乐优</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
								<a class="navbar-brand" href="dynamic/news.html">
									<img src="../img/logo.png" alt="" class="logo_img">
								</a>
							</div>
							<div class="collapse navbar-collapse" id="example-navbar-collapse">
								<ul class="nav navbar-nav">
									<li class="active">
										<a href="dynamic/news_list.html">高考动态</a>
									</li>
									<li class="nav-phone">
										<a href="">招生计划</a>
										<div class="sub_nav_01">
											<ul>
												<li>
													<a href="enrollment_programs/entrance_marks.html">2019年高考分数线</a>
												</li>
												<li class="">
													<a href="enrollment_programs/apply_number.html">2019年高校招生计划</a>
												</li>
												<li>
													<a href="enrollment_programs/ranking_specialty.html">2019年贫困专项计划</a>
												</li>
												<li>
													<a href="enrollment_programs/university_VR.html">高校VR全景视图</a>
												</li>
												<li>
													<a href="enrollment_programs/ranking_school.html">高校人气排行榜</a>
												</li>
												<li>
													<a href="enrollment_programs/special_item.html">专业人气排行榜</a>
												</li>
												<li>
													<a href="enrollment_programs/build_uni.html">”双一流“建设高校</a>
												</li>
												<li>
													<a href="enrollment_programs/apply_number.html">历年高考人数</a>
												</li>
											</ul>
										</div>
									</li>
									<li class="nav-phone">
										<a href="enrollment_programs/entrance_inquire.html">录取分数</a>
										<div class="sub_nav_01" style="display: none;">
											<ul>
												<li class="">
													<a href="enrollment_programs/entrance_inquire.html">录取分数</a>
												</li>


											</ul>
										</div>
									</li>
									<li class="nav-phone nav-phone-commont">
										<a>评论专区</a>
									</li>
									<li class="nav-phone">
										<a href="">个人中心</a>
									</li>
									<li class="nav-phone nav-phone-lr" style="padding: 0;">
										<a href="login.html">登录</a>
										<a href="register.html">/注册</a>
									</li>
								</ul>
							</div>
						</div>
					</nav>
				</div>
			</div>
			<!--广告-->
			<div class="banner">
				<img src="../img/banner.jpg" />
			</div>
			<!--登录框-->
			<div class="sign_guiding">
				———————&nbsp;&nbsp;高考报考指南&nbsp;&nbsp;———————
			</div>
			<div class="login_box">
				<div class="login_title">
					<strong>|</strong>找回密码
				</div>
				<div class="">
					<div class="form_wrapper">
						<span style="color:red;display:none;" id="msg">登录xx</span>
						<div class="layui-form-item">
							<div class="layui-input-block input_wrap">
								<input id="phone" type="text" name="userName" lay-verify="title" required="required" autocomplete="off" class="layui-input" placeholder="请输入手机号码">
								<!--<i class="icons-phone-num"></i>-->
								<i class="icon iconfont login_icons"><img src="../img/temp/phone_icon.png"></i>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-input-block input_wrap">
								<input id="validateCode" type="text" name="code2" placeholder="请输入手机验证码" maxlength="6" required="required" autocomplete="off" class="layui-input">
								<button onclick="getValidateCode();" type="button" class="get_yanzhengma_btn bg_gray">获取验证码</button>
								<i class="icon iconfont login_icons"><img src="../img/temp/yanzhgma_icon.png"></i>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-input-block input_wrap">
								<input id="password" type="password" name="password" placeholder="请输入密码" required="required" autocomplete="off" class="layui-input">
								<!--<i class="icons-password"></i>-->
								<i class="icon iconfont login_icons"><img src="../img/temp/password_icon.png"></i>
							</div>
						</div>
						<div id="passHandle" class="layui-form-item">
							<div class="loginHandle">
								<button class="layui-btn layui-input-login orange_bg" lay-submit="" lay-filter="demo1">确认</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--尾部-->
			<div class="footer_container">
				<div class="layui-container">
					<div class="layui-row">
						<div class="layui-col-lg6 layui-col-md6 layui-col-sm12 layui-col-xs12 footer_left">
							<p>甘肃海龙科技有限公司</p>
							<p>客服电话：010:4256889</p>
							<p>COPYRIGHT © 2019 海龙科技 All Rights Reserved 沪ICP备97033193号 拷贝</p>
						</div>
						<div class="layui-col-lg5 layui-col-md6 layui-col-sm12 layui-col-xs12 footer_right">
							<div class="layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
								<div class="layui-col-lg6 layui-col-md6 layui-col-sm6 layui-col-xs6">
									<img src="../img/erweima.jpg" />
								</div>
								<!--<div class="layui-col-lg6 layui-col-md6 layui-col-sm6layui-col-xs6">
									<img src="../img/erweima.jpg" />
								</div>-->
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/md5.js"></script>
	<script type="text/javascript" src="../layui/layui.js"></script>
	<script type="text/javascript" src="../layui/lay/modules/layer.js"></script>
	<script>
	var getVCodeFlag = false;
		var code = '';
		/*获取焦点时验证手机号码*/
		$('#phone').focus(function() {
			$('#msg').html("请输入合法的手机号");
			$('#msg').show();
		})
		/*失去焦点时验证手机号码*/
		$('#phone').blur(function() {
			var phone = $('#phone').val();
			var phonePattern = /^1(3|4|5|7|8)\d{9}$/;
			if(!phone || !(phonePattern.test(phone))) {
				$('#msg').html("您输入的手机号码有误");
				$('#msg').show();
			} else {
				$('#msg').hide();
			}

		})
		/*获取焦点时验证密码*/
		$('#password').focus(function() {
			$('#msg').html("输入6-20个字母、数字、下划线");
			$('#msg').show();
		})
		/*失去焦点时验证密码*/
		$('#password').blur(function() {
			var password = $('#password').val();
			var pPattern = /^(\w){6,20}$/;
			if(!password || !(pPattern.test(password))) {
				$('#msg').html("您输入的密码有误");
				$('#msg').show();
			} else {
				$('#msg').hide();
			}

		})
		/*获取焦点时验证短信验证码*/
		$('#validateCode').focus(function() {
			$('#msg').html("请输入手机验证码");
			$('#msg').show();
		})
		/*失去焦点时验证短信验证码*/
		$('#validateCode').blur(function() {
			var validateCode = $('#validateCode').val();

			if(!validateCode) {
				$('#msg').html("请输入验证码");
				$('#msg').show();

			} else if(!code) {
				$('#msg').html("请先获取验证码");
				$('#msg').show();
			} else if(validateCode.length != 4) {
				$('#msg').html("验证码不足4位");
				$('#msg').show();
			} else if(validateCode != code) {
				$('#msg').html("您输入的验证码有误");
				$('#msg').show();
			} else {
				$('#msg').hide();
			}
		})
		/*获取验证码*/
		function getValidateCode() {
			var phone = $("#phone").val();

			//校验手机号的合法性
			if(phone == null || phone == '') {
				$('#msg').html("请填写手机号");
				$('#msg').show();

				return;
			}
			if(!(/^1[34578]\d{9}$/.test(phone))) {
				$('#msg').html("您填写的手机号码有误，请重新填写");
				$('#msg').show();
				return;
			}
			//$('#msg').hide();
			$('#msg').html("请求数据中。。。");
			$('#msg').show();
			$.ajax({
				url: "http://47.111.188.27:8080/gsgkzyl/user/code/" + phone,
				type: "get",
				success: function(d) {
					if(d.status == 0){
						getVCodeFlag = true;
						$('#msg').html(d.msg);
						//$('#msg').show();
						code = d.data;
						console.log(d)
					}
					
				}
			});

		}
		$('#passHandle').click(function() {
			var phone = $('#phone').val();
			var password = $('#password').val();
			var validateCode = $('#validateCode').val();

			var phonePattern = /^1(3|4|5|7|8)\d{9}$/;
			var pPattern = /^(\w){6,20}$/;

			//校验手机号的合法性
			if(phone == null || phone == '') {
				$('#msg').html("手机号不能为空");
				$('#msg').show();
				$("#phone").focus();
				return;
			};
			if(!getVCodeFlag) {
				$('#msg').html("请先获取验证码");
				$('#msg').show();
				$("#phone").focus();
				return;
			}
			if(validateCode == null || validateCode == '') {
				$('#msg').html("验证码不能为空");
				$('#msg').show();
				return;
			};
			if(password == null || password == '') {
				$('#msg').html("密码不能为空");
				$('#msg').show();
				$("#phone").focus();
				return;
			}

			if(!(phonePattern.test(phone))) {
				$('#msg').html("您填写的手机号码有误，请重新填写");
				$('#msg').show();
				return;
			}
			if(!(pPattern.test(password))) {
				$('#msg').html("只能输入6-20个字母、数字、下划线  ");
				$('#msg').show();
				return;
			}
			var data = {
					code: validateCode,
					mobile:phone,
					password:password
			};
			console.log(data)
			$.ajax({
				type: "POST",
				url: "http://47.111.188.27:8080/gsgkzyl/user/forget",
				xhrFields: {
                withCredentials:true
                 },
                crossDomain: true,
				//contentType: "application/x-www-form-urlencoded; charset=UTF-8",
				data: data,
				success: function(pass) {
					console.log(pass)
					if(pass.status == 0) {
					    layer.alert('密码修改成功',function(){
							window.location.href = "login.html"
						})
						

					} else {
						$('#msg').show();
						$('#msg').html(pass.msg);

					}
				}
			});
		})

		$("#validateCode").keyup(function() {
			//判断此输入框内容是否为4个
			//如果为4个，把这个框里的值进行md5加密
			//与后台返回的串进行对比
			//把对比结果显示为提示信息
			var validateCode = $('#validateCode').val();
			var validateCodeLen = $('#validateCode').val().length;
			if(validateCodeLen == 4) {

				if(validateCode == code) {
					$('#msg').html(" 验证码输入正确 ");
					$('#msg').show();
					return;
				} else {
					$('#msg').html(" 验证码输入错误 ");
					$('#msg').show();
				}
			}

		});
	</script>

</html>